<template>
	<view class="flex">
		<view class="flex align-center tag-box" :style="{background: bgColor}">
			<view :style="{background: leftBg,color: leftColor}" class="left-title">{{title}}</view>
			<view class="right-title">
				<view class="nei color-white" :style="{color: color}">{{number}} {{unit}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '限量'
			},
			number: {
				type: Number,
				default: 0
			},
			unit: {
				type: String,
				default: '份'
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
			color: {
				type: String,
				color: '#fff'
			},
			leftColor: {
				type: String,
				default: '#fff'
			},
			leftBg:{
				type: String,
				default: 'linear-gradient(90deg, #12D6DF 0%, #F70FFF 100%)'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag-box {
		// background: #ffeeef;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.left-title {
		font-size: 18rpx;
		text-align: center;
		padding: 2rpx 10rpx;
		line-height: 40rpx;
		border-radius: 8rpx 0 0 8rpx;
	}

	.right-title {
		font-size: 22rpx;
		text-align: center;
		line-height: 40rpx;
		padding: 2rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
	}

	.nei {
		border-radius: 18rpx;
		padding: 0 10rpx;
		text-align: right;
	}
</style>